<style lang="scss" scoped>
    @import '../../css/resource.scss';
    ::-webkit-input-placeholder { /* WebKit browsers */
        color:    #bbb;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #bbb;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    #bbb;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color:    #bbb;
    }
.order-head{padding: 24px 16px 14px 24px;background: #fff;}
.head-tab-box span{margin-right: 30px;cursor: pointer;font-size: 16px; display: block;}
.head-tab-checked{color: $mco;border-bottom: 3px solid $mco;}
.head-second-box.order-header{ display: flex;  align-content: center; justify-content: space-between;}
.head-second-box.order-header > div {
    display: flex;
    align-items: center;
}

.kind-word{color: #aaa;margin-right: 30px;}
.check-box{display: inline-block;}
.order-input-box{float: right;background: #f7f8fa;padding: 8px 10px;width: 340px;}
.order-input-box input{width: 320px;border:none;outline: none;background: none;}
.icon-search{color: #ccc}

.order-num-box{padding: 18px 24px;background: #fff;color: #999;margin-top: 10px;border-bottom: 1px solid #eee;}
.del-icon{font-size: 18px;color: #999;cursor: pointer;float: right;}
.order-main-head{padding: 18px 24px 18px 0;background: #fcfdff;margin-top: 12px;text-align: center;}
.order-body{padding: 0 24px 0 0;background: #fff;}
.book-info-box{padding: 18px 0 18px 24px;}
.border-t{border-top:1px solid #eee;}
.border-r{border-right: 1px solid #eee;}
.car-content{height: 90px;line-height: 90px;text-align: center;padding: 18px 0;}
.car-title{padding-left: 24px;}
.avatar-box{float: left;margin-right: 12px;width: 64px;height: 90px;}
.avatar-box img{width: 100%;height: 100%;}
.author-box{padding-top: 10px;}
.book-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-bottom: 30px;}
.author-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999}
.change-box{color: $mco;text-align: center;line-height: 30px;}
.change-box span{padding: 6px 12px;cursor: pointer;}
.status2-top{padding-top: 48px;}
.status1-top{padding-top: 35px;}
.change-btn-active{color: #fff;background: $mco;}
.fo-333{color: #333;}

.form-bill-tag{text-align: center;color: #999;margin: -20px 0 50px;}
.dialog-btn-left{width: 120px;margin: 0 10px 0 -4px;}
.dialog-btn-right{width: 120px;}
</style>
<style src="@/css/components/main.css"></style>

<template>
    <section class="my-order">
        <section>
            <div class="order-head">
                <div class="head-second-box order-header">
                    <div style="opacity:0">
                        <span class="kind-word">类型 :</span>
                        <span class="check-box">
                            <el-checkbox-group v-model="resCateID" @change="changeKind">
                                <template v-for="one in kindList">
                                    <el-checkbox :label="one.ResCateID">{{one.CateName}}</el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </span>
                    </div>

                    <!-- <div class="my-order-input-box fr">
                        <el-input placeholder="按资源名称和订单号进行搜索" v-model="searchKeyWords" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
                        </el-input>
                    </div> -->

                    <el-input
                        placeholder="按资源名称和订单号进行搜索"
                        suffix-icon="el-icon-search"
                        class="search"
                        v-model="searchKeyWords">
                    </el-input>
                </div>
            </div>
            <div v-show="list.length!=0">
                <el-row class="order-main-head">
                    <el-col :span="10"><div class="car-title">资源信息</div></el-col>
                    <el-col :span="4">单价及数量</el-col>
                    <el-col :span="4">实付款</el-col>
                    <el-col :span="3">交易状态</el-col>
                    <el-col :span="3">交易操作</el-col>
                </el-row>
                <div>
                    <template v-for="one in list">
                        <el-row class="order-num-box clearfix">
                            <span>{{one.CreateTime}}</span> <span>订单号：{{one.OrderNo}}</span><i class="el-icon-delete del-icon" @click="delOrder(one.OrderID)"></i>
                        </el-row>
                        <template v-for="item,index in one.goods">
                            <el-row class="order-body">
                                <el-col :span="10">
                                    <div class="book-info-box" :class="{'border-t':index>0}">
                                        <div class="book-info clearfix">
                                            <div class="avatar-box">
                                                <img v-if="one.OrderType==1||one.OrderType==2" :src="item.ResourceCover" alt="">
                                                <img v-if="one.OrderType==3" src="../../images/ic-message.png" alt="">
                                                <img v-if="one.OrderType==4" src="../../images/ic-mail.png" alt="">
                                                <img v-if="one.OrderType==5" src="../../images/ic-space.png" alt="">
                                            </div>
                                            <div class="author-box">
                                                <div :class="{'pt20':one.OrderType!=1&&one.OrderType!=2}" class="book-name">{{item.ResourceName}}</div>
                                                <div v-if="one.OrderType==1||one.OrderType==2" class="author-name">{{item.Author}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="car-content" :class="{'border-r':one.goods.length>1,'border-t':index>0}">
                                        ￥{{item.Price}}x{{item.Num}}
                                    </div>
                                </el-col>
                                <el-col :span="4" v-show="index==0">
                                    <div class="car-content">
                                        <span class="color-orange">{{one.TotalPrice}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="3" v-show="index==0">
                                    <div class="car-content">
                                        {{one.OrderStatus==1?'等待付款':one.OrderStatus==2?'付款成功':'交易关闭'}}
                                    </div>
                                </el-col>
                                <el-col :span="3" v-show="index==0">
                                    <div class="change-box" :class="{'status2-top':one.OrderStatus==2,'status1-top':one.OrderStatus==1}">
                                        <div v-show="one.OrderStatus==1"><span class="change-btn-active" @click="account(one)">立即付款</span></div>
                                        <div v-show="one.OrderStatus==2">
                                            <span @click="openApply(one.OrderID)" v-show="one.HasBill==0">发票申请</span>
                                            <div class="fo-333" v-show="one.HasBill==1">发票已申请</div>
                                            <div class="fo-333" v-show="one.HasBill==2">发票已开出</div>
                                        </div>
                                        <div v-show="one.OrderStatus==1" @click="cancelOrder(one.OrderID)"><span>取消订单</span></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </template>
                </div>
                <div v-show="pageInfo.total>20">
                    <el-pagination class="mt20 fr"
                                   background
                                   @size-change="getList"
                                   @current-change="getList"
                                   :current-page.sync="pageInfo.page"
                                   :page-size="pageInfo.pageSize"
                                   layout="prev, pager, next, jumper"
                                   :total="pageInfo.total">
                    </el-pagination>
                </div>
            </div>
        </section>

        <section class="no-resource" v-if="list.length==0">
            <div><img src="../../images/ic-default.png" alt=""></div>
            <p class="no-word">没有符合条件的订单，请尝试其它搜索内容</p>
        </section>

        <el-dialog
                title="发票申请"
                :visible.sync="dialogFlag"
                width="680px"
                center>
            <p class="form-bill-tag">请核对是否正确，按照此信息开出的发票后不可补开发票</p>
            <el-form :model="formBill" :rules="rules" ref="formBill" label-width="180px">
                <el-form-item label="公司名称" prop="title" >
                    <el-input class="input" v-model="formBill.title" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="公司税号" prop="taxNo" >
                    <el-input class="input" v-model="formBill.taxNo" placeholder="请输入公司税号"></el-input>
                </el-form-item>
            </el-form>


            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogFlag = false">取消</el-button>
                <el-button class="dialog-btn-right" type="primary" @click="sureApply('formBill')">确认申请</el-button>
            </span>
        </el-dialog>
    </section>

</template>

<script>

import qs from 'qs'
import com from 'js/common.js'

export default{
    data: function(){
        return {
            resCateID:[],
            orderStatus:0,
            searchKeyWords:'',
            kindList:[],
            pageInfo: {
                pageSize: 20,
                total:0,
                page:1
            },
            list:[],
            formBill:{
                title:'',
                taxNo:'',
                OrderID:''
            },
            dialogFlag:false,
            rules: {
                companyName: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                taxNum: [
                    { required: true, message: '请输入公司税号', trigger: 'blur' }
                ]
            },
            path: [
                {
                    'name':'资源管理',
                    'path':'/resource/book-list'
                },
                {
                    'name':'我的订单',
                    'path':'/resource/my-order'
                },
                {
                    'name':'所有订单'
                }
            ],

            tab:[
                {
                    name: '所有订单',
                    type: '0'
                },
                {
                    name: '待付款',
                    type: '1'
                },

                {
                    name: '交易成功',
                    type: '2'
                }
            ]
        }
    },
    watch:{
        creentTab(){
            this.page = 1
            this.getAllOrder()
        },

        searchKeyWords() {
            this.getList()
        }
    },

    computed: {
        creentTab(){
            return this.$store.state.creentTab
        },

        "allMoney" : function() {
            return "123";
        }
    },

    methods: {
        account(one){          //跳支付页面
            this.$router.push({name:'resourceResourcePay',query:{OID:one.OrderID,allCount:one.TotalPrice}})
        },
        openApply(orderID){
            axios.post('/com/orders/getBillInfo', qs.stringify({})).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.formBill.title = d.data.Title;
                    this.formBill.taxNo = d.data.TaxNo;
                    this.formBill.OrderID = orderID;
                    this.dialogFlag = true;
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        sureApply(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post('/com/orders/addBill', qs.stringify(this.formBill)).then((res) => {
                        var d = res.data;
                        if(d.flag == 1){
                            this.dialogFlag = false;
                            this.getList();
                        }else {
                            this.$message.error(d.msg)
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        getAllOrder(){
            console.log(this.creentTab)
            this.orderStatus = Number(this.creentTab)
            let arr = ['所有订单', '待付款','交易成功']

            let len = this.path.length
            this.path.splice(len-1, 1, {'name':arr[this.orderStatus]})

            this.$store.commit('setPath', this.path)

            this.getList();
        },

        changeKind(){
            this.getList();
        },
        delOrder(id){
            this.$confirm('删除后数据不可恢复，请再次确认是否要删除，未开票的删除后不可开票', '您确定要删除该订单吗？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.post('/com/orders/delete', qs.stringify({
                    OrderID:id
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.getList();
                    }else {
                        this.$message.error(d.msg)
                    }
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        cancelOrder(id){
            this.$confirm('取消订单后交易关闭，请再次确认是否要取消', '您确定要取消该订单吗？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.post('/com/orders/cancel', qs.stringify({
                    OrderID:id
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.getList();
                    }else {
                        this.$message.error(d.msg)
                    }
                })
                this.$message({
                    type: 'success',
                    message: '订单已取消!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消'
                });
            });
        },
        getList(){
            axios.post('/com/orders/list', qs.stringify({
                orderStatus: this.orderStatus,
                resCateID:this.resCateID.join(','),
                keyWords:this.searchKeyWords,
                pagesize:this.pageInfo.pageSize,
                page:this.pageInfo.page
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data.Rows;

                    this.pageInfo.total=Number(d.data.Total);
                }else {
                    this.$message.error(d.msg)
                }
            })
        }
    },
    mounted: function(){
        this.getList();
        this.$store.commit('setPath', this.path)
        // 设置tab切换
        this.$store.commit('setTab', this.tab)

        // 设置面包屑
        this.$store.commit('setTabCur', 0)

        // axios.post('/com/res-cates/getSystemResList', qs.stringify({})).then((res) => {
        //     var d = res.data;
        //     if(d.flag == 1){
        //         this.kindList = d.data.Row;
        //     }else {
        //         this.$message.error(d.msg)
        //     }
        // });
    }
}


</script>
